<template>
	<view class="assistant-item flex">
		<view class="item-img">
			<up-image :show-loading="true" :src="assistantInfo.avatar" width="128rpx" radius="12rpx"
				height="128rpx"></up-image>
		</view>
		<view class="item-info">
			<text class="name">{{ assistantInfo.nickname }}</text>
			<text class="price">￥{{ assistantInfo.assistant_price }} / {{ assistantInfo.time_unit }}分钟</text>
			<text class="status">{{ assistantInfo.level_name }}</text>
		</view>
	</view>
</template>

<script setup>
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const props = defineProps({
	assistantInfo: {
		default: {}
	}
})
const assistantInfo = ref(computed(() => props.assistantInfo))
</script>

<style lang="scss" scoped>
view {
	// border: 1rpx solid red;
}

.assistant-item {
	box-sizing: border-box;
	padding: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0rpx 0rpx 20rpx 6rpx rgba(108, 199, 190, 0.38);


	.item-img {
		width: 128rpx;
		height: 128rpx;
		border-radius: 12rpx;
		position: relative;


	}

	.item-info {
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;

		.name {
			font-size: 30rpx;
			font-weight: bold;
			color: $name-color;
		}

		.price {
			font-size: 28rpx;
			color: $price-color;
			margin-top: 16rpx;
			margin-bottom: 10rpx;
		}

		.status {
			width: fit-content;
			height: 42rpx;
			padding: 0 20rpx;
			border-radius: 12rpx;
			background-color: #ff9900;
			color: #fff;
			font-size: 28rpx;
			line-height: 42rpx;
		}
	}
}
</style>